<template>
  <div class="base-chart">
    <div
      class="base-chart-container"
      :style="{ width, height }"
      ref="chartRef"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, withDefaults } from 'vue';
import { EChartsOption } from 'echarts';

import { initEchart } from './hooks/useEchart';

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    options: EChartsOption;
  }>(),
  {
    width: '100%',
    height: '100%',
  }
);

const chartRef = ref<HTMLElement>();

onMounted(() => {
  // eslint-disable-next-line
  const {  chartInstance, setOption } = initEchart(chartRef.value!);

  setOption(props.options);
});
</script>

<style lang="scss" scoped>
.base-chart {
  width: 100%;
  height: 100%;
}
</style>
